<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<!-- 标题 -->
		
		<view class="uni-block-form">
			<view class="title u-m-b-40">{{ title }}</view>
			<u-form :model="form" ref="uForm" :border-bottom="false" labelWidth="100rpx">
				<u-form-item label="用户名"><u-input  border="bottom" :clearable="false" :custom-style="input_style" placeholder="请输入用户名" v-model="form.username" /></u-form-item>
				<u-form-item label="密码">
					<u-input  border="bottom" :password="true" type="password" :clearable="false" :custom-style="input_style" placeholder="请输入密码" v-model="form.password"></u-input>
				</u-form-item>
				<u-gap height="120rpx"></u-gap>
				<u-button type="primary" shape="circle" :custom-style="customStyle" @click="logout">登录</u-button>
			</u-form>

			<!-- 	<view class="form_tip">
				<text>登录即表示您已阅读并同意</text>
				<text @click="getProtocol" class="main-color">《用户使用协议》</text>
			</view> -->
		</view>
	</view>
</template>
<script>
import {mapState, mapMutations} from 'vuex';
export default {
	data() {
		return {
			title: '商家登录', //填写logo或者app名称，也可以用：欢迎回来，看您需求
			input_style: {
				color: '#A9A9A9'
			},
			form: {
				password: '',
				username: ''
			}
		};
	},
	onLoad() {},
	computed: {
		...mapState({
			token: state => state.$Token
		})
	},
	methods: {
		logout() {
			uni.$u.http
				.post('/madmin/operation/logout', {})
				.then(res => {
					this.login();
				})
				.catch(err => {});
		},
		login() {
			uni.$u.http
				.post('/madmin/operation/login', this.form)
				.then(res => {
					let json = res.msg;
					let token = json.token;
					this.$store.commit('setToken', token);
					let ruleList = json.ruleList;
					this.$store.commit('setRuleList', ruleList);
					let userinfo = json.msg;
					this.$store.commit('setuserinfo', userinfo);
					this.geturl();
				})
				.catch(err => {});
		},
	
		geturl() {
			uni.$u.http
				.get('/shop/pic/geturl', {})
				.then(res => {
					let url = res.msg;
					this.$store.commit('setBasicsUrl', url);
					this.getaddons();
				})
				.catch(err => {});
		},
		getaddons() {
			uni.$u.http
				.get('/madmin/addons', {})
				.then(res => {
					let addons = res.msg;
					this.$store.commit('setAddons', addons);
					this.$isResolve();
					uni.$u.route({
						url: 'pages/index/index',
						type:'reLaunch'
					});
				})
				.catch(err => {});
		}
	}
};
</script>
<style lang="scss">
.uni-block-form {
	width: 686rpx;
	border-radius: 12rpx;
	background: #ffffff;
	margin: 0 auto;
	.title {
		font-size: 60rpx;
		font-weight: bold;
		color: #333333;
		padding: 80rpx 0;
		text-align: left;
		width: 100%;
		display: inline-block;
		position: relative;

		text {
			position: relative;
			z-index: 2;
			line-height: 70rpx;
			width: 100rpx;
		}
		&::after {
			content: '';
			display: block;
			width: 108rpx;
			height: 18rpx;
			background: var(--main-color);
			opacity: 1;
			border-radius: 18rpx;
			position: absolute;
			bottom: 22rpx;
			left: -4rpx;
			z-index: 1;
		}
	}
	.form_tip {
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
	}
	.main-color {
		color: var(--main-color);
	}
}
</style>
